<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-18 10:49:41
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-18 12:52:38
-->
<template>
    <div>
        <el-breadcrumb :separator-icon="ArrowRight">
            <template v-for="item, index in breadcrumbs" :key="index">
                <el-breadcrumb-item v-if="item.to" :to="{ path: item.to }">{{ item.title }}</el-breadcrumb-item>
                <el-breadcrumb-item v-else>{{ item.title }}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from "vue";
//引入路由
import { useRoute } from "vue-router";

//引入watchEffect监听
import { watchEffect } from "vue";

//引入路由
const route = useRoute()
//引入
const breadcrumbs = ref([] as typeof route.meta.breadcrumbs)

watchEffect(() => {
    breadcrumbs.value = route.meta.breadcrumbs
})
</script>

<style lang="scss" scoped>
.el-breadcrumb__item {
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}
</style>